﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">默认</h3>

<pre class="rayui-code" data-options='{"encode": true, "title": "我是主代码"}'>

function initContainer1() {
    $('#container').find('.con-panel').each(function () {
        $(this).append('<h3 class="spliter">' + $(this).attr("type")+'</h3>');
        calender.render({
            type: $(this).attr("type"),
            container: $(this)
        });
    });
}

<pre class="rayui-code" data-options='{"encode": true, "blankToChar": true, "title": "我是子集代码，内嵌无标题代码"}'>
function initContainer2() {
    $('#container').find('.con-panel').each(function () {
        $(this).append('<h3 class="spliter">' + $(this).attr("type")+'</h3>');
        calender.render({
            type: $(this).attr("type"),
            container: $(this)
        });
    });
}
<pre class="rayui-code rayui-even" data-options='{"encode": true, "blankToChar": "="}'>
function initContainer3() {
    $('#container').find('.con-panel').each(function () {
        $(this).append('<h3 class="spliter">' + $(this).attr("type")+'</h3>');
        calender.render({
            type: $(this).attr("type"),
            container: $(this)
        });
    });
}
</pre>
</pre>

alert('111');

<pre class="rayui-code code-1" data-options='{"encode": true, "blankToChar": "~", "title": "嵌套代码"}'>
function initContainer4() {
    $('#container').find('.con-panel').each(function () {
        $(this).append('<h3 class="spliter">' + $(this).attr("type")+'</h3>');
        calender.render({
            type: $(this).attr("type"),
            container: $(this)
        });
    });
}
</pre>


function initContainer5() {
    $('#container').find('.con-panel').each(function () {
        $(this).append('<h3 class="spliter">' + $(this).attr("type")+'</h3>');
        calender.render({
            type: $(this).attr("type"),
            container: $(this)
        });
    });
}
</pre>

    <script>
        rayui.use(["code"], function () {

            var code = rayui.code;

            code.render({ copy: true });
        })

    </script>

    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

js函数的options属性 和 dom的data-options属性：
container：容器
encode：是否转译，可选true|false，默认false。如果含有html标签，可以设置为true
blankToChar：空格替换，可选：不处理|true|可见字符，默认不处理，true替换成"-"
height：设置高度
title：标题
copy：是否支持复制，可选true|false，默认false
even：隔行换色，也可直接在pre上添加rayui-even样式
skin：皮肤，也可直接在pre上添加rayui-"skin值"样式，比如rayui-notepad

函数：
render(container|options)：container可以使jquery字符串选择器，也可以是jquery对象。没有返回值

</pre>
    <div class="card">
        属性可以写在js函数内，也可以写到dom标签内（data-options），当写data-options时一定要按照标准的json去写，否则无效<br />
        比如：data-options='{"encode": true, "title": "我是主代码", "copy": true}'
    </div>
    <div class="card">
        data-options的优先级高于函数options的优先级
    </div>
</body>
</html>